<template>
    <div id="verify-statistic-list">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="统计方式">
                <el-select clearable v-model="formInline.type" placeholder="请选择统计方式">
                    <el-option v-for="(item, index) in typeList"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="到期时间" class="verify-time">
                <el-row>
                    <el-col :span="11" class="time-width">
                        <el-date-picker
                                v-model="formInline.startTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="00:00:00">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="1" class="time-span">~</el-col>
                    <el-col :span="11" class="time-width">
                        <el-date-picker
                                v-model="formInline.endTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="23:59:59">
                        </el-date-picker>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border highlight-current-row size="small">
            <el-table-column label="统计类型" align="center" prop="type"></el-table-column>
            <el-table-column label="景区未结算资金（元）" align="center" prop="unSettleAmount"></el-table-column>
            <el-table-column label="景区已结算资金（元）" align="center" prop="settleAmount"></el-table-column>
            <el-table-column label="已到期清分结算金额（元）" align="center" prop="serviceAmount"></el-table-column>
        </el-table>
        <el-pagination
                layout="total, prev, pager, next, jumper"
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="handleChangePage">
        </el-pagination>
    </div>
</template>
<script>
	import { getSettleAccountStatisticsList } from '@/api/settleAccountStatistics'
//	import { formatDate } from '@/utils/utils'
	const startTime = new Date()
	startTime.setTime(startTime.getTime() - 3600 * 1000 * 24 * 7)
	export default {
		data() {
			return {
				list: [],
				listLoading: false,
				formInline: {
					type: 0,
					startTime: startTime,
					endTime: new Date()
				},
				dimensionList: [],
				total: null,
				currentPage: 1,
				pageSize: 20,
				typeList: [
					{ id: 0, name: '按天' },
					{ id: 1, name: '按周' },
					{ id: 2, name: '按月' },
					{ id: 3, name: '按季' },
					{ id: 4, name: '按年' }
				]
			}
		},
		created() {
//			this.getStatisticsDimensionList()
			this.fetchData()
		},
		methods: {
			fetchData() {
				this.listLoading = false
				let formInline = this.formInline
				let params = {
					startTime: new Date(formInline.startTime).getTime(),
					endTime: new Date(formInline.endTime).getTime(),
					type: formInline.type,
					pageNumber: this.currentPage,
					pageSize: this.pageSize
				}
				getSettleAccountStatisticsList(params).then(res => {
					let data = res.data
					this.listLoading = false
					if (data.errorCode === 'E_000') {
						this.list = data.body.pageInfo.list
						this.total = data.body.pageInfo.total
					}
				})
			},
			getStatisticsDimensionList() {
//				getStatisticsDimensionList().then(res => {
//					let data = res.data
//					this.listLoading = false
//					if (data.errorCode === 'E_000') {
//						this.dimensionList = data.body
//					}
//				})
			},
			onSearch() {
				this.fetchData()
			},
			handleChangePage(val) {
				this.currentPage = val
				this.fetchData()
			}
		}
	}
</script>
<style lang="scss">
    #verify-statistic-list{
        .el-dialog__body{
            padding-top: 10px;
        }
        .el-table__header-wrapper{
            overflow: visible;
        }
        .verify-time{
            .el-form-item__content{
                width: 480px;
            }
            .time-width{
                width: 220px;
            }
            .time-span{
                text-align: center;
            }
        }
        .el-table{
            overflow: visible !important;
        }
        .el-table .el-table__body-wrapper {
            overflow: visible;
        }
        .el-table .cell {
            padding: 0 4px;
            overflow: visible;
        }
    }
</style>
